<template>
	<div class="CategoryTab1_one swiper">
		<ol class="swiper-wrapper">
			<!-- 计算属性的返回结果[重组的数组]，丢给循环操作 -->
			<li v-for="(list,index) in pages" :key="index" class="swiper-slide">
				<router-link to="/" v-for="item in list" :key="item.id">
					<p>
						<img :src="item.imgURL"/>
					</p>
					<aside>
						<h3>{{item.title}}</h3>
						<label>{{item.msg}}</label>
						<p>￥{{item.price}}起</p>
					</aside>
				</router-link>
			</li>
		</ol>
		<div class="swiper-paginat"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
	</div>
</template>

<script>
	// 1引入vue周期函数
	import {onMounted} from 'vue';
	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	// 3swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	export default{
		name:'CategoryTab1_one',
		data(){
			return{
				tab1List : [
					{id:1,imgURL:'hdimg/1.jpg',title:'秋袭·大禹谷',msg:'杭州出发 | 1天',price:120},
					{id:2,imgURL:'hdimg/2.jpg',title:'四明湖水杉',msg:'杭州出发 | 1天',price:150},
					{id:3,imgURL:'hdimg/3.jpg',title:'徒步·东白山',msg:'杭州出发 | 1天',price:130},
					{id:4,imgURL:'hdimg/4.jpg',title:'轻装·武功山',msg:'萍乡出发 | 2~3天',price:240},
					{id:5,imgURL:'hdimg/5.jpg',title:'浙西吴越古道',msg:'杭州出发 | 1天',price:160},
					{id:6,imgURL:'hdimg/6.jpg',title:'红枫·黄南古道',msg:'杭州出发 | 1天',price:170},
					{id:7,imgURL:'hdimg/7.jpg',title:'秋徒·莫干山',msg:'杭州、莫干... | 1天',price:178},
					{id:8,imgURL:'hdimg/8.jpg',title:'慢骑·莫干山',msg:'杭州出发 | 1天',price:100},
					{id:9,imgURL:'hdimg/9.jpg',title:'嵊州红枫古道',msg:'杭州出发 | 1天',price:130},
					{id:10,imgURL:'hdimg/10.jpg',title:'东藏会',msg:'杭州 | 1天',price:148},
					{id:11,imgURL:'hdimg/11.jpg',title:'一网婺源秋色',msg:'婺源/杭州... | 2天',price:560},
					{id:12,imgURL:'hdimg/12.jpg',title:'南京秋色童话',msg:'杭州出发 | 2天',price:395},
					{id:13,imgURL:'hdimg/13.jpg',title:'房车露营盲盒',msg:'杭州出发 | 2天',price:868},
					{id:14,imgURL:'hdimg/14.jpg',title:'径山古道',msg:'杭州出发 | 1天',price:120},
					{id:15,imgURL:'hdimg/15.jpg',title:'徒步搁船尖',msg:'杭州出发 | 1天',price:160},
					{id:16,imgURL:'hdimg/16.jpg',title:'古道·龙坞',msg:'杭州出发 | 1天',price:98},
					{id:17,imgURL:'hdimg/17.jpg',title:'神仙居武义',msg:'缙云西站 | 3~2天',price:1530},
				],
			}
		},
		computed:{
			//程序将其当成是属性不是函数，是个变量[循环/判断]
			pages(){
				let arr=[];//空数组，目的是：重组一个二维数组
				let num =6  //每页条数
				//将原数组便历
				this.tab1List.forEach((item,index)=>{
					//每页的页码
					let i=Math.floor(index/num);
					//将计算的页码放入新数组内，作为下标：
					//判断改下标是否已存在
					if(!arr[i]){
						arr[i]=[];
						arr[i].push(item);
						
					}else{
						//已经出现过直接添加
						arr[i].push(item);
					}
					
					// if(!arr[i])    arr[i]=[];
					// arr[i].push(item);
				})
				return arr;
			}
		},
		setup(){
			onMounted ( ()=> {
				new Swiper('.CategoryTab1_one',{
					// 设置分页器效果
					pagination : {
						el:'.swiper-paginat'
					},
				})
			})
		},
	}
</script>

<style scoped>
	.CategoryTab1_one{
		width: 100%;
		height: 25rem;
	}
	.CategoryTab1_one li{
		width: 100%;
		
	}
	.CategoryTab1_one a{
		text-align: center;
		float: left;
		width: 33%;
		height: 27%;
		text-decoration: none;
		color: black;
		line-height: 1rem;
		position: relative;
	}
	.CategoryTab1_one a img{
		margin-top: 0.5rem;
		width: 95%;
		border-radius: 0.3rem;
		
	}
	
	.CategoryTab1_one a h3{
		margin: 0 auto;
		width: 90%;
		text-align: left;
		font-size: 0.5rem;
		font-weight: bolder;
		line-height: 2rem;
		text-indent: 1rem;
	}
	.CategoryTab1_one a label{
		width: 6rem;
		margin-left: 0.5rem;
		position: absolute;
		top: 0.5rem;
		right:0.2rem;
		background-color: rgba(0,0,0,0.6);
		display: block;
		text-align: center;
		color: white;
		border-radius: 0 0.4rem 0 0.4rem;
		font-size: 0.5rem;
		display: -webkit-box;
		-webkit-line-clamp: 1;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
	}
	.CategoryTab1_one a aside p{
		text-align: left;
		text-indent: 0.2rem;
		color: white;
		font-weight: bolder;
		font-size: 0.4rem;
		position: absolute;
		bottom: 2rem;
	}
	
	/* 穿透*/
	.swiper-paginat  :deep(.swiper-paginat-bullet-active){
		background-color: white;
	}
</style>
